<template>
  <el-dialog :title="data.title" :close-on-click-modal="false" @close="close" :visible.sync="visible">
    <el-form :model="form" :rules="rules" ref="form" size="mini">
      <el-row>
        <el-col :span = 12>
          <el-form-item label="航空公司" :label-width="formLabelWidth" prop="airline">
            <el-select v-model="form.airline"  filterable placeholder="请选择" clearable>
              <el-option v-for="item in airlineOptions" :key="item.key" :label="item.value" :value="item.key"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = 12>
          <el-form-item label="航司登陆账号" :label-width="formLabelWidth" prop="b2bAccount">
            <el-input v-model="form.b2bAccount"/>
          </el-form-item>
        </el-col>
        <el-col :span = 12>
          <el-form-item label="航司登陆密码" :label-width="formLabelWidth" prop="b2bPwd">
            <el-input v-model="form.b2bPwd" type="password"/>
          </el-form-item>
        </el-col>
        <el-col :span = 12>
          <el-form-item label="对应office号" :label-width="formLabelWidth" prop="office">
            <el-input v-model="form.office"/>
          </el-form-item>
        </el-col>
        <el-col :span = 12>
          <el-form-item label="支付账号选择" :label-width="formLabelWidth" prop="b2b_pay_account_id">
            <el-select v-model="form.payAccountIdStr" multiple   clearable >
              <el-option v-for="item in b2bPayAccountOptions" :key="item.key" :label="item.value" :value="item.key"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = 24>
          <el-form-item label="简要说明" :label-width="formLabelWidth" prop="remark">
            <el-input v-model="form.remark" type="textarea"/>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <c-button type="primary" @click="btnOk" v-if="data.showsave">确 定</c-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SDialogEdit',
  props: {
    data: {
      type: Object
    }
  },
  data () {
    return {
      formLabelWidth: '120px',
      visible: true,
      b2bPayAccountOptions: [],
      airlineOptions: [],
      form: {
        id: this.data.detail.id,
        airline: this.data.detail.airline,
        b2bAccount: this.data.detail.b2bAccount,
        b2bPwd: this.data.detail.b2bPwd,
        office: this.data.detail.office,
        remark: this.data.detail.remark,
        payAccountIdStr: this.data.detail.payAccountIdStr.split(',')
      },
      rules: {
        airline: {required: true, message: '请选择航空公司', trigger: 'blur'}
      }
    }
  },
  // 详情查看生命周期，约等于界面载入完成
  mounted () {
    this.getSelectData()
  },
  methods: {
    // 固定写法，每次加载都需要重置form
    close () {
      this.$emit('close')
    },
    btnOk (btn) {
      this.$refs['form'].validate((valid) => {
        // 校验通过
        if (valid) {
          if (this.form.id === '') {
            this.$service.airB2bIssueAccount.addAirB2bIssueAccount(this.form).then(() => {
              this.visible = false
              this.$emit('ok')
            }).finally(() => {
              btn.isLoading(false)
            })
          } else {
            this.$service.airB2bIssueAccount.updateAirB2bIssueAccount(this.form).then(() => {
              this.visible = false
              this.$emit('ok')
            }).finally(() => {
              btn.isLoading(false)
            })
          }
        } else {
          btn.isLoading(false)
        }
      })
    },
    getSelectData () {
      this.$service.options.getB2bPayAccount().then(res => {
        this.b2bPayAccountOptions = res.data
      })
      this.$service.options.getAirLineOption().then(res => {
        this.airlineOptions = res.data
      })
    }
  }
}
</script>

<style>

</style>
